Jassif Team Institution

Scaling up Vue

আমাদের Vue প্রকল্পের জন্য *.vue ফাইলগুলি ব্যবহার করা অর্থপূর্ণ কারণ:

• টেমপ্লেট এবং উপাদানগুলির ব্যবহারে বড় প্রকল্পগুলি পরিচালনা করা সহজ হয়ে ওঠে।
• ব্যবহারকারীরা https প্রোটোকলের মাধ্যমে আমাদের প্রকল্প দেখতে এবং পরীক্ষা করতে পারে যেন তারা পৃষ্ঠাটি দেখছে।
• পরিবর্তনগুলি পুনরায় লোড না করে সংরক্ষণ করা হলে পৃষ্ঠাটি অবিলম্বে রিফ্রেশ হয়৷
• Vue-তে বাস্তব ওয়েব পৃষ্ঠাগুলি এভাবেই তৈরি করা হয়।
• এভাবেই ডেভেলপাররা কাজ করে।

Why?

Vue-তে টেমপ্লেট এবং কম্পোনেন্ট সম্বন্ধে আমরা আগের পৃষ্ঠায় দেখেছি, আমাদের এখন অন্যভাবে কাজ করতে হবে কারণ আমরা চাই:

• বড় পরিকল্পনা আছে
• সমস্ত Vue সম্পর্কিত কোড এক জায়গায় সংগ্রহ করতে
• Vue-তে উপাদান ব্যবহার করতে (আমরা শীঘ্রই এটিতে আসব)
• সম্পাদকে হাইলাইটিং এবং স্বয়ংক্রিয়-সম্পূর্ণ সমর্থন আছে
• স্বয়ংক্রিয়ভাবে ব্রাউজার রিফ্রেশ করতে

এই সব সম্ভব করার জন্য, আমাদের *.vue ফাইলগুলিতে স্যুইচ করতে হবে।

How?

SFCs (একক ফাইল উপাদান), বা *.vue ফাইলগুলির সাথে কাজ করা সহজ, কিন্তু একটি ব্রাউজারে সরাসরি চালানো যায় না, তাই আমাদের *.vue ফাইলগুলিকে *.html, *.css এবং *.js ফাইলগুলিতে কম্পাইল করার জন্য আমাদের সিস্টেম সেট আপ করতে হবে যাতে ব্রাউজারটি আমাদের Vue অ্যাপ্লিকেশন চালাতে পারে৷

SFC-এর উপর ভিত্তি করে আমাদের ওয়েব পৃষ্ঠা তৈরি করতে, আমরা বিল্ড টুল হিসাবে Vite নামক একটি প্রোগ্রাম ব্যবহার করি এবং VS কোড এডিটরে Vue 3 ভাষার বৈশিষ্ট্যের জন্য Volar এক্সটেনশন সহ আমাদের কোড লিখি।

Setup

আপনার কম্পিউটারে Vue SFC অ্যাপ্লিকেশনগুলি চালানোর জন্য আপনার যা প্রয়োজন তা ইনস্টল করতে নীচের তিনটি ধাপ অনুসরণ করুন৷

The "VS Code" Editor

Vue প্রকল্পের জন্য অনেকগুলি বিভিন্ন সম্পাদক ব্যবহার করা যেতে পারে। আমরা ভিএস কোড এডিটর ব্যবহার করি। ভিএস কোড ডাউনলোড এবং ইনস্টল করুন।

The VS Code "Volar" Extension

এডিটরে *.vue ফাইলের সাথে হাইলাইটিং এবং স্বয়ংক্রিয়-সম্পূর্ণতা পেতে, VS কোড খুলুন এবং বাম দিকে "এক্সটেনশন" এ যান। "Volar" অনুসন্ধান করুন এবং আরও ডাউনলোড সহ "Vue 3 এর জন্য ভাষা সমর্থন" বর্ণনা সহ এক্সটেনশনটি ইনস্টল করুন৷

Node.js

Node.js , Vue "Vite" .

Node.js - .

Create The Default Example Project

আপনার কম্পিউটারে একটি ডিফল্ট Vue উদাহরণ প্রকল্প তৈরি করতে নীচের পদক্ষেপগুলি অনুসরণ করুন৷

1. আপনার কম্পিউটারে আপনার Vue প্রকল্পগুলির জন্য একটি ফোল্ডার তৈরি করুন।
2. ভিএস কোডে, মেনু থেকে টার্মিনাল -> নতুন টার্মিনাল বেছে নিয়ে একটি টার্মিনাল খুলুন:

3. cd <folder-name>, cd .., ls (Mac/Linux) এবং dir (Windows) এর মতো কমান্ড ব্যবহার করে আপনার তৈরি Vue ফোল্ডারে নেভিগেট করতে টার্মিনাল ব্যবহার করুন। আপনি যদি টার্মিনালে কমান্ড লেখার সাথে পরিচিত না হন তবে এখানে কমান্ড লাইন ইন্টারফেস (CLI) এর সাথে আমাদের পরিচিতি দেখুন।
4. টার্মিনালে আপনার Vue ফোল্ডারে নেভিগেট করার পরে, টাইপ করুন:

npm init vue@latest

প্রকল্পের নাম হিসাবে "firstfc" দিয়ে আপনার প্রথম প্রকল্প তৈরি করুন:

সমস্ত বিকল্পের জন্য "না" উত্তর দিন:

এখন এটি আপনার টার্মিনালে প্রদর্শিত হওয়া উচিত:

এখন উপরের প্রস্তাবিত কমান্ড রান করা যাক.

'firstsfc' ফোল্ডারের ভিতরে আপনার নতুন প্রকল্পে ডিরেক্টরি পরিবর্তন করতে এই কমান্ডটি চালান:

cd firstsfc

Vue প্রকল্পের কাজ করার জন্য প্রয়োজনীয় সমস্ত নির্ভরতা ইনস্টল করুন:

npm install

বিকাশ সার্ভার শুরু করুন:

npm run dev

টার্মিনাল উইন্ডোটি এখন এইরকম হওয়া উচিত:

এবং আপনার ব্রাউজার স্বয়ংক্রিয়ভাবে উদাহরণ প্রকল্প খুলতে হবে:

আপনি যদি ব্রাউজারে উদাহরণ প্রকল্পটি খুঁজে না পান তবে টার্মিনাল থেকে লিঙ্কটি ব্যবহার করুন৷ আপনার টার্মিনাল উইন্ডোতে পাওয়া লিঙ্কটির উপরের স্ক্রিনশটের চেয়ে আলাদা ঠিকানা থাকতে পারে।

এখন উদাহরণ প্রকল্পটি প্রশস্ত বিল্ড টুল সহ আপনার মেশিনে বিকাশ মোডে চলছে।

The Project Files

স্বয়ংক্রিয়-উত্পন্ন উদাহরণ প্রকল্পে বেশ কয়েকটি ফাইল রয়েছে এবং আমরা সেগুলির কয়েকটিতে দ্রুত নজর দেব।

main.js

VS কোড সম্পাদকে আপনার Vue প্রকল্পে যান এবং "src" ফোল্ডারে "main.js" ফাইলটি সনাক্ত করুন:

"main.js" হোয়াইটকে বলে কিভাবে "App.vue" ফাইলের উপর ভিত্তি করে একটি Vue প্রকল্প তৈরি করতে হয়। এটি একই রকম যে আমরা পূর্বে ব্রাউজারকে আমাদের Vue কোড চালানোর জন্য একটি স্ক্রিপ্ট ট্যাগ সহ একটি CDN লিঙ্ক প্রদান করেছি এবং কিভাবে আমরা <div id="app"> ট্যাগে Vue ইনস্ট্যান্স লোড করেছি।

App.vue

একই উদাহরণ প্রকল্প ফোল্ডারে, "App.vue" ফাইলটি খুঁজুন এবং খুলুন। অন্য সব *.vue ফাইলের মতো, "App.vue" তিনটি অংশ নিয়ে গঠিত: একটি <script> অংশ, একটি <টেমপ্লেট> অংশ এবং একটি <style> অংশ।

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>
  </header>

  <main>
    <TheWelcome />
  </main>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>

আপনি "App.vue" এর স্ক্রিপ্ট অংশে দেখতে পাচ্ছেন, অন্যান্য *.vue ফাইলগুলি উল্লেখ করা হয়েছে: সেগুলি 'কম্পোনেন্ট' এবং 'কম্পোনেন্টস' ফোল্ডারে অবস্থিত। আপনি যদি 'App.vue' ফাইলের 'টেমপ্লেট' বিভাগে দেখেন, তাহলে আপনি এমন ট্যাগ দেখতে পাবেন যেগুলি সাধারণ HTML ট্যাগ নয়: <HelloWorld> এবং <TheWelcome>। এইভাবে উপাদানগুলিকে উপস্থাপন করা হয়। উপাদানগুলি একটি অ্যাপের ভিতরে একটি অ্যাপের মতো। আমরা শীঘ্রই উপাদান সম্পর্কে আরও জানতে হবে.

Vue Exercises